<template>
  <view class="result-wrapper-pos">
    <view class="top-box"
      :style="{
          backgroundImage:'url('+staticImgs.topBg+')'
       }"
    >
        
    </view>
    
      <view class="main-wrapper">
        <view class="date-box">
          <!-- 诊断日期：2024.08.17 -->
          诊断日期：{{report.createTime}}
        </view>
        <view
          class="conclusion-box"
          :style="{
                backgroundImage:'url('+staticImgs.conclusionBg+')'
           }"
        >
          {{report.detailedResults.p || ""}}
        </view>
        
        <view class="details-wrapper">
          
          <view class="p" v-for="(item,index) in report.detailedResults.contentArr" :key="index">
            {{item.t}}
          </view>
          
          <template v-if="hasSuggestion">
            <view class="suggestion-img-box"
              :style="{
                    backgroundImage:'url('+staticImgs.suggestionImg+')'
               }"
            >
              <view class="abs-tit" v-if="report.suggestions.p">{{report.suggestions.p}}</view>
            </view>
            <view class="suggestion-list-wrapper">
              <template v-for="(box,index) in report.suggestions.contentArr">
                <view class="tit-box-pos" v-if="box.p">
                  <view class="tit-box"
                    :style="{
                          backgroundImage:'url('+staticImgs.suggestionTitBg1+')'
                     }"                    
                  >{{box.p}}</view>
                </view>
                <view class="p-box" v-if="box.p">
                  <template v-if="box.pArr">                    
                    <view class="p" v-for="(p,subI) in box.pArr">
                      {{p}}
                    </view>
                  </template>
                  <view v-else-if="box.t" class="p">
                    {{box.t}}
                  </view>
                </view>
              </template>
            </view>
          </template>
          
        </view>
        
      </view>
  </view>
</template>

<script>
  export default{
    props:{
      report:{}
    },
    data(){
      return {
        staticImgs:{
          topBg:this.imgBaseURL + '/scl/checkup-depressed/total-report-top-bg.png',
          conclusionBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-info-bg.png',
          suggestionImg:  this.imgBaseURL + '/scl/checkup-depressed/total-report-suggess.png',
          suggestionTitBg1:  this.imgBaseURL + '/scl/checkup-depressed/total-report-tit-bg-1.png',
        },
        p:'你可能有较严重的抑郁情绪问题，相关的症状可能已经持续很久，对你的生活、工作、学习和人际关系造成严重影响。你可能常表现出极度的悲伤、绝望、无助感，失去对日常活动的兴趣和乐趣，甚至出现自杀念头或行为。此外，还可能伴有睡眠障碍、食欲改变、体重波动、精力减退、注意力难以集中、记忆力下降等身体和心理症状。',
        hasSuggestion:true,
        tmpArr:[
          {
            tit:'立即寻求专业医疗帮助',
            pArr:[
              '重度抑郁症需要紧急和专业的医疗干预。患者应尽快前往医院精神科或心理卫生中心就诊，接受全面的评估和治疗。',
            ]
          },
          {
            tit:'建立支持网络',
            pArr:['家人、朋友和专业人士的支持对于患者的康复至关重要。建立一个稳固的支持网络，让患者感受到关爱和支持，有助于减轻其孤独感和无助感。']
          },
          {
            tit:'健康生活方式',
            pArr:['尽管在严重抑郁期间可能难以维持，但健康的生活方式如规律作息、均衡饮食、适量运动等仍有助于缓解抑郁症状。在可能的情况下，鼓励患者逐渐养成这些习惯。']
          },
          {
            tit:'避免自我封闭',
            pArr:['鼓励患者参与社交活动，与他人交流互动，避免长时间独处和自我封闭。这有助于缓解孤独感，增强社会联系。']
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .result-wrapper-pos{
    width: 682rpx;
    height: auto;
    background: linear-gradient( 180deg, #60DFF9 0%, #BBF8FA 9%, #FFFFFF 100%);
    
    
    
    box-shadow: 0rpx 2rpx 20rpx 0rpx #3EDBBA;
    border-radius: 35rpx;
    margin: auto;
    margin-top: 24rpx;
    position: relative;
    
    .top-box{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 368rpx;
      background-size: 682rpx 368rpx;
      background-repeat: no-repeat;
      

    }
    
    .main-wrapper{
      // max-height: calc(76vh - 50rpx - 36rpx);
      // min-height: 74vh;
      // overflow: scroll;
      height: auto;
      box-sizing: border-box;
      position: relative;
      padding-top: 138rpx;
      padding-bottom: 54rpx;
      
      .date-box{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        margin-left: 30rpx;
      }
      
      
      .conclusion-box{
        margin: auto;
        margin-top: 60rpx;

        width: 611rpx;
        height: 78rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 48rpx;
        color: #0C473B;
        line-height: 78rpx;
        letter-spacing: 2px;
        text-align: center;
        font-style: normal;
      }
      
      .details-wrapper{
        margin-top: 38rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .p{
          width: 626rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #0C473B;
          line-height: 43rpx;
          letter-spacing: 1px;
          text-align: justify;
          font-style: normal;
        }
        
        .suggestion-img-box{
          position: relative;
          width: 580rpx;
          height: 276rpx;
          
          margin: auto;
          margin-top: 40rpx;
          margin-bottom: 54rpx;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          
          .abs-tit{
            word-break: keep-all;

            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
            color: #0C473B;
            line-height: 50rpx;
            letter-spacing: 1px;
            text-align: center;
            font-style: normal;
            
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -16rpx;
          }
        }
        // suggestion-img-box end
        
        .suggestion-list-wrapper{
          
          .tit-box-pos{
            position: relative;
            height: 78rpx;
            margin-bottom: 20rpx;
            
            .tit-box{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 33rpx;
              color: #06322A;
              line-height: 46rpx;
              letter-spacing: 1px;
              text-align: left;
              font-style: normal;
              
              position: absolute;
              top: 0;
              left: -40rpx;
              // height: 78rpx;
              padding: 16rpx;
              padding-left: 38rpx;
              padding-right: 35rpx;
              
              background-size: 100% 100%;
              background-repeat: no-repeat;
              
            }
            
          }
          
          
          
          .p{
            margin-bottom: 32rpx;
          }
        }
        
      }
      // details-wrapper - end
      
      
      
      
    }
    
  }
  
</style>